import React, { FC, forwardRef, useRef, useImperativeHandle, useState } from 'react';
import { Divider, Button, Input, List, Form } from 'antd-mobile';
import { Checkbox } from 'antd';
import './style.css'

interface LoginProps {
    login: (value?: any) => void;
    valueLink?: any;
    agreement?: string;
}

// 登录页组件
const Login = forwardRef<LoginProps, any>((props, ref: any) => {
    const { login, valueLink, agreement } = props;
    return (
        <div className='login'>
            <div className='header'>
                <div className='title'>
                    <span className='title-login'>登录</span>
                    {/* TODO:这个地方的href先写死 */}
                    <a href='http://localhost:3000/#/merLogReg/shopOpenNotice' className='title-reg'>{valueLink}</a>
                </div>
                <Divider />
            </div>
            <div className='login-mode'>
                <span className='password'>密码登录</span>
                <span className='deliver'>|</span>
                <span className='vcode'>验证码登录</span>
            </div>
            <div className='list'>
                <Form
                    layout='horizontal'
                    ref={ref}
                >
                    <Form.Item
                        name='username'
                        label='账号'
                    // rules={[{ required: true, message: '账号不能为空' }]}
                    >
                        <Input placeholder='请输入账号' clearable />
                    </Form.Item>
                    <Form.Item
                        name='password'
                        label='密码'
                    // rules={[{ required: true, message: '密码不能为空' }]}
                    >
                        <Input placeholder='6-16位必须包含数字、字母' clearable type='password' />
                    </Form.Item>
                </Form>
            </div>
            <Button block color='primary' size='large' className='button' onClick={e => login && login()}>
                登录
            </Button>
            <a href='#' className='forget'>忘记账号和密码</a>
            <div className='footer'>
                <Checkbox>
                    登录即代表您已同意<a>{agreement}</a>
                </Checkbox>
            </div>
        </div>
    )
})
export default Login;
